<template>
  <div class="boxxxx">
    <header class="ttt">
      <van-nav-bar title="订单确认" left-arrow @click-left="$router.go(-1)" />
    </header>
    <main class="zhong">
      <div class="submit-address" @click="newAddress">
        <span>新增收货地址</span>
      </div>
      <!-- 底部弹出 -->
      <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">
        <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
          :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
          @delete="onDelete" @change-detail="onChangeDetail" />
      </van-popup>
      <div class="address1" @click="gidzl">
        <div class="div-top">
          <div class="div-left">{{ addres1.name }}</div>
          <div class="div-right">
            <p>
              <span class="addressname">{{ addres1.name }}</span>
              <span class="addresstel">{{ addres1.tel }}</span>
            </p>
            <p class="addressS">{{ addres1.province }}--{{ addres1.city }}--{{ addres1.county }} -- {{
              addres1.addressDetail }}</p>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in selectedItems" :key="index" class="order-list">
        <div>
          <dl class="order-item">
            <dt><img :src="item.img" alt="" style="width: 150px; height: 150px" /></dt>
            <dd>
              {{ item.title }}
              <p>x{{ item.num }}</p>
            </dd>
            <b>￥{{ item.price }}</b>
          </dl>
        </div>
        <span>
          <dl class="order-items">
            <dt>商品金额</dt>
            <dd>￥{{ item.price }}</dd>
          </dl>
          <dl class="order-items">
            <dt>优惠卷</dt>
            <dd>无可用></dd>
          </dl>
          <dl class="order-items">
            <dt>运费</dt>
            <dd>￥0.00</dd>
          </dl>
          <dl class="order-items">
            <dt></dt>
            <dd class="order-items-price">￥{{ item.price }}</dd>
          </dl>
        </span>
      </div>
      <div class="fp">
        <van-cell center title="发票信息">
          <template #right-icon>
            <van-switch v-model="checked" @click="check" />
          </template>
        </van-cell>
        <van-field v-model="value" label="买家留言：" placeholder="对本次交易的说明" />
      </div>
    </main>
    <footer>
      <div class="jiage">
        <div class="pric">
          <span>应付金额：</span>
          <span class="numb">￥{{
            selectedItems
              .reduce((sum, item) => sum + item.price * item.num, 0)
              .toFixed(2)
          }}</span>
        </div>
        <div class="buttonss">
          <button @click="pay">立即支付</button>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { showToast } from "vant";
import './index.css'
// 获取地址
import { areaList } from "@vant/area-data";

import { computed, onMounted, reactive, ref } from "vue";
const showBottom = ref(false);
const newAddress = () => {
  showBottom.value = true;
};

const cartlist = ref([]);
// 页面加载时从 localStorage 获取购物车数据
onMounted(() => {
  const storedCart = localStorage.getItem("cartlist");
  if (storedCart) {
    cartlist.value = JSON.parse(storedCart);
  }
});
import { useRoute } from "vue-router";
import axios from "../../utils/index";
import router from "@/router";
const route = useRoute();
const selectedItems = JSON.parse(route.query.selectedItems as string) || [];
const checked = ref(true);
const check = () => {
  checked.value = !checked.value;
};

// 地址编辑

const searchResult = ref([]);
const onDelete = () => showToast("delete");

const gidzl = () => {
  router.push('/address') 
}
   

// 计算价格
const pricenum = computed(() => {
  return selectedItems.reduce((sum, item) => sum + item.price * item.num, 0);
});

const pay = () => {
  // 模拟id
  const orderId = Date.now().toString();
  axios
    .get("/api/pay", {
      params: {
        id: orderId,
        price: pricenum.value.toFixed(2),
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        window.open(res.data.result);
      }
    });
}
let address = reactive({
  tel: '',
  nickname: '',
  longitude: '',
  latitude: '',
  detail_address: ''
})
// 点击保存实现新增收货地址
const onSave = (item) => {
  localStorage.setItem('addresss', JSON.stringify(item))
  // 姓名
  address.nickname = item.name
  // 手机号
  address.tel = item.tel
  // 省
  address.longitude = item.province
  // 市
  address.latitude = item.city
  // 详细地址
  address.detail_address = item.addressDetail
  axios.post('/api/addressChunYuAdd', {
    ...address
  })
  showBottom.value = false;
  window.location.reload()
}
const addres1 = JSON.parse(localStorage.getItem('addresss') as string)
</script>
